<div class="{{class | default: 'custom_nav nav_type1'}}" id="{{id | default: 'custom_nav'}}" style="--menu-color:{{menu_color}};--height: {{height}};--bg: {{bg_color}};">
  <ul>
    {% if header_nav.size > 0 %}
      {% for item in header_nav.nav_item %}
        <li class="nav-li">
          {% if item.children %}
            <span>
              {% include "nav_a", class: 'nav-li-a', nav: item %}
              {% if drop_down == "true" %}
                <i class="{{down_icon_class}}"></i>
              {% endif %}
            </span>

            <div class="nav-child">
              <div class="nav_container_wrapper">
                {% for el in item.children %}
                  {% if el.children %}
                    <dl>
                      <dt>
                        {% include "nav_a", nav: el %}
                        {% if drop_down == "true" %}
                          <i class="{{down_icon_class}}"></i>
                        {% endif %}
                      </dt>
                      {% for ddItem in el.children %}
                        <dd>
                          {% include "nav_a", nav: ddItem %}
                        </dd>
                      {% endfor %}
                    </dl>
                  {% else %}
                    <dl>
                      <dt>
                        {% include "nav_a", nav: el %}
                      </dt>
                    </dl>
                  {% endif %}
                {% endfor %}
              </div>

            </div>
          {% else %}
            <span>
              {% include "nav_a", class: 'nav-li-a', nav: item %}
            </span>
          {% endif %}
        </li>
      {% endfor %}

    {% else %}
      <li class="nav-li">
        <span>
          <a class="nav-li-a" href="/">Home</a>
        </span>
      </li>
      <li class="nav-li">
        <span>
          <a class="nav-li-a" href="/">Woman</a>
        </span>
      </li>
      <li class="nav-li">
        <span>
          <a class="nav-li-a" href="/">New</a>
        </span>
      </li>
      <li class="nav-li">
        <span>
          <a class="nav-li-a" href="/">Tops</a>
        </span>
      </li>
      <li class="nav-li">
        <span>
          <a class="nav-li-a" href="/">Dresses</a>
        </span>
      </li>
      <li class="nav-li">
        <span>
          <a class="nav-li-a" href="/">Sale</a>
        </span>
      </li>
    {% endif %}
  </ul>
</div>
